<template>
	<view>
		<!-- 信息 -->
		<view class="info">
			<view class="info-title">信息</view>
			<view class="full_width info-box">
				<view class="info-item">
					<text>申报人</text>
					<text class="info-item-right">{{userInfo.userName}}</text>
				</view>
				<view class="info-item">
					<text style="flex-shrink: 0;">项目</text>
					<picker mode="selector" :range="projectList" range-key="name" @change="selectPro">
						<text v-if="projectName" class="info-item-right">{{projectName}}</text>
						<text v-else class="info-item-right">请选择</text>
					</picker>
				</view>
				<view class="info-item">
					<text>责任人</text>
					<picker mode="selector" :range="chargePerson" range-key="userName" @change="selectCharge">
						<text v-if="safeForm.auditName" class="info-item-right">{{safeForm.auditName}}</text>
						<text v-else class="info-item-right">请选择</text>
					</picker>
				</view>
			</view>
		</view>
		<!-- 质量信息 -->
		<view class="info">
			<view class="info-title">安全信息</view>
			<view class="info-box">
				<view class="info-item">
					<text>名称</text>
					<input type="text" class="info-input" v-model="safeForm.title" placeholder="请输入" />
				</view>
				<view class="info-item">
					<text>发生时间</text>
					<picker mode="date" @change="selectEnventTime">
						<text v-if="enventTimeMsg" class="selected_time">{{enventTimeMsg}}</text>
						<text v-else class="report_value">请选择</text>
					</picker>
					<!-- <input type="text" v-model="safeForm.enventTime" class="info-input" placeholder="请输入" /> -->
				</view>
				<view class="info-item">
					<text>结果</text>
					<input type="text" v-model="safeForm.result" class="info-input" placeholder="请输入" />
				</view>
				<view class="textarea-title">内容简述</view>
				<textarea class="textarea-style" v-model="safeForm.content" placeholder="请输入" />
			</view>
		</view>
		
		<!-- 添加其他费用 -->
		<block v-for="(item,ind) in OtherExpense" :key="ind">
			<view class="add-item-title full_width flex_row just_space_between pd_lt_40 pd_rt_40">
				<text class="status_txt">其他费用{{ind+1}}</text>
				<text class="delete_status_txt" @tap="deleteMaintainFee(ind)">删除</text>
			</view>
			<view class="report_list flex_col al_center">
				<view class="add-item-box full_width report_item flex_row just_space_between al_center ">
					<text class="report_name">主题</text>
					<view class="flex_row al_center">
						<input type="text" class="money-input" v-model="item.title" placeholder="请输入" />
					</view>
				</view>
				
				<view class="add-item-box full_width report_item flex_row just_space_between al_center ">
					<text class="report_name">选择类别</text>
					<view class="flex_row al_center">
						<picker mode="selector" :range="categorys" range-key="name" @change="selectCate($event,item)">
							<text v-if="item.type" class="selected_time">{{item.typeName}}</text>
							<text v-else class="report_value">请选择</text>
						</picker>
						<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
					</view>
				</view>
				
				<view class="add-item-box full_width report_item flex_row just_space_between al_center ">
					<text class="report_name">金额</text>
					<view class="flex_row al_center">
						<input type="number" @blur="regFen($event,item)" v-model="item.totalFeeYuan" class="money-input" placeholder="请输入" />
						
					</view>
				</view>
				
				<view class="add-item-box full_width report_item flex_row just_space_between al_center">
					<text class="report_name">人数</text>
					<view class="flex_row al_center">
						<uni-number-box :min="0" @change="changeCount($event,item)"></uni-number-box>
					</view>
				</view>
				<view class="add-item-box full_width report_item flex_row just_space_between al_center ">
					<text class="report_name">开始时间</text>
					<view class="flex_row al_center">
						<picker mode="date" @change="selectStartTime($event,item)">
							<text v-if="item.startTime" class="selected_time">{{item.startTimeMsg}}</text>
							<text v-else class="report_value">请选择</text>
						</picker>
						<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
					</view>
				</view>
				<view class="add-item-box full_width report_item flex_row just_space_between al_center ">
					<text class="report_name">结束时间</text>
					<view class="flex_row al_center">
						<picker mode="date" @change="selectEndTime($event,item)">
							<text v-if="item.endTime" class="selected_time">{{item.endTimeMsg}}</text>
							<text v-else class="report_value">请选择</text>
						</picker>
						<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
					</view>
				</view>
				
				<view class="add-item-box full_width report_item flex_row just_space_between al_center ">
					<text class="report_name">结果</text>
					<view class="flex_row al_center">
						<input type="text" v-model="item.result" class="money-input" placeholder="请输入" />
					</view>
				</view>
				
				<view class="add-item-box full_width report_item flex_row just_space_between al_center ">
					<text class="report_name">原因</text>
					<view class="flex_row al_center">
						<input type="text" v-model="item.reason" class="money-input" placeholder="请输入" />
						
					</view>
				</view>
				
				<!-- {garbageTyep:null,count:null,unit:null} -->
			</view>
		</block>
		<view class="add-item" @tap="addMaintainFee">
			<uni-icons type="plusempty" class="mg_lt_30" color="#345AD4"></uni-icons>
			<text class="add_times_txt">其他费用</text>
		</view>
		<view class="two_btn mg_tp_20 flex_row">
			<view v-show="false" class="draft_btn flex_row just_center al_center">
				<text>保存到草稿</text>
			</view>
			<view class="submit_btn flex_row just_center al_center" @tap="submitPost">
				<text>立即提交</text>
			</view>
		</view>
	</view>
</template>

<script>
	import permision from "@/js_sdk/wa-permission/permission.js";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				OtherExpense:[],
				projectList:[],
				chargePerson:[],
				projectName:"",
				chargeName:"",
				categorys: [{name:'交通',type:1},{name:'餐饮',type:2},{name:'住宿',type:3},{name:'检查',type:4},
				{name:'培训',type:5},{name:'电话',type:6},{name:'罚款',type:7},],
				units: [{
					text: '升(L)'
				}, {
					text: '千米(km)'
				}, {
					text: '吨(t)'
				}],
				lng: 114.044116,
				lat: 22.617529,
				safeForm:{
					auditName:""
				},
				enventTimeMsg:'',
				userInfo:{}
			}
		},
		computed: {
			...mapState(['refreshFlag'])
		},
		onLoad() {
			let _this = this
			uni.getLocation({
				geocode: true,
				success(res) {
					_this.lng = res.longitude
					_this.lat = res.latitude
					let address1 = res.address.poiName||res.address.street||res.address.district
					_this.address = address1
				},
				fail(err) {
					console.error(err)
				}
			})
			this.userInfo = uni.getStorageSync('userInfo')
			this.getProjectList()
		},
		onReady(){
			let _this = this
			if (uni.getSystemInfoSync().platform == 'ios') {
				if (!permision.judgeIosPermission("location")) {
					permision.gotoAppPermissionSetting();
				}
			}
			 else
			{
				_this.requestAndroidPermission("android.permission.ACCESS_FINE_LOCATION");
			}
			if(!permision.checkSystemEnableLocation()){
				uni.showModal({
				    title: '提示',
				    content: '请您手动前往设置打开定位服务！',
				    success: function (res) {
				        if (res.confirm) {
				            _this.$utils.navBack()
				        } else if (res.cancel) {
				            _this.$utils.navBack()
				        }
				    }
				});
			}
		},
		methods:{
			...mapMutations(['setRefresh']),
			async requestAndroidPermission(permisionID) {
				let _this = this
				let result = await permision.requestAndroidPermission(permisionID)
				if (result === 1) {
				} else if (result === 0) {
					uni.showModal({
					    title: '提示',
					    content: '需要您的定位授权!',
					    success: function (res) {
					        if (res.confirm) {
					            console.log('requestAndroidPermission 用户点击确定');
								permision.gotoAppPermissionSetting();
					        } else if (res.cancel) {
					           _this.$utils.navBack()
					        }
					    }
					});
				} else {
					uni.showModal({
					    title: '提示',
					    content: '需要您的定位授权!',
					    success: function (res) {
					        if (res.confirm) {
					            // console.log('requestAndroidPermission 用户点击确定');
								permision.gotoAppPermissionSetting();
					        } else if (res.cancel) {
					            _this.$utils.navBack()
					        }
					    }
					});
				}
			},
			// 获取项目列表
			getProjectList() {
				this.$utils.http.get('/project/projectInfo/listAll', {}).then(res => {
					if (res.code == 200) {
						this.projectList = res.data
					}
				})
			},
			// 获取项目负责人
			getChargePerson(projectInfoId) {
				this.$utils.http.post('/project/projectUsers/listByprojectInfoId?projectInfoId='+projectInfoId, {}).then(res => {
					if (res.code == 200) {
						this.chargePerson = res.data
						console.log(this.chargePerson)
					}
				})
			},
			// 选择项目
			selectPro(e) {
				// this.safeForm.projectId = this.projectList[e.detail.value].id
				this.safeForm.projectId = 173 //先使用固定值，后期接动态
				this.projectName = this.projectList[e.detail.value].name
				if(this.safeForm.projectId) {
					this.getChargePerson(this.safeForm.projectId)
				}
			},
			// 选择责任人
			selectCharge(e) {
				this.safeForm.auditName = this.chargePerson[e.detail.value].userName
				this.safeForm.auditLoginName = this.chargePerson[e.detail.value].loginName
			},
			
			// 发生时间
			selectEnventTime(e) {
				this.safeForm.enventTime = new Date(e.detail.value.toString()).getTime()
				this.enventTimeMsg = e.detail.value
			},
			// 选择人数
			changeCount(e, item) {
				item.count = e
			},
			// 选择类型
			selectCate(e, item) {
				item.type = this.categorys[e.detail.value].type
				item.typeName = this.categorys[e.detail.value].name
			},
			// 开始时间
			selectStartTime(e, item) {
				item.startTime = new Date(e.detail.value.toString()).getTime()
				item.startTimeMsg = e.detail.value
				// item.startTime = this.units[e.detail.value].text
			},
			// 结束时间
			selectEndTime(e,item) {
				item.endTime = new Date(e.detail.value.toString()).getTime()
				item.endTimeMsg = e.detail.value
			},
			// 添加数组
			addMaintainFee() {
				this.OtherExpense.push({
					title:'',
					type: null,
					totalFee:'',
					count: 0,
					startTime:null,
					endTime:null,
					result: "",
					reason:""
				})
			},
			// 删除数组
			deleteMaintainFee(index) {
				this.$delete(this.OtherExpense, index)
			},
			// 元转分
			regFen(e,item) {
				item.totalFeeYuan = e.detail.value
				item.totalFee = this.$utils.regYuanToFen(Number(e.detail.value),100)
				console.log(item.totalFee)
			},
			decide(name, title) {
				if (this[name] != null) {
					let x = 0
					for (let i = 0; i < this[name].length; i++) {
						x++;
						for (let key in this[name][i]) {
							if (!this[name][i][key]) {
								uni.showToast({
									icon: 'none',
									title: title + (i + 1) + '请填写完整或删除该项'
								})
								return false;
								break;
							}
						}
					}
					if (x === this[name].length) {
						return true
					}
				} else {
					return true
				}
			},
			// 提交表单
			submitPost() {
				if (this.decide('OtherExpense', '其他费用')) {
					
				} else {
					return false
				}
				let data = {
					"title":this.safeForm.title,
					"createrId": uni.getStorageSync('userInfo').uid,
					"createrName": uni.getStorageSync('userInfo').userName,
					"type": "safety",
					"projectId": this.safeForm.projectId,
					"projectName":this.projectName,
					"auditName":this.safeForm.auditName,
					"auditLoginName":this.safeForm.auditLoginName,
					"lng": this.lng,
					"lat": this.lat,
					"enventTime": this.safeForm.enventTime,
					"content": this.safeForm.content,
					"result": this.safeForm.result,
					"otherExpenses": this.OtherExpense,
				}
				console.log(data)
				this.$utils.http.post('/usual/safety/commit', data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '提交成功',
							duration: 1000,
						})
						setTimeout(() => {
							// this.setRefresh({
							// 	flag: 'time_report'
							// });
							console.log("=1 this.refreshFlag=" + this.refreshFlag);
							this.$utils.navBack();
						}, 1000)
					}
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #F8F9FC;
	}
</style>
<style scoped>
	@import "@/common/css/main.css";
.info {
	
}
.info-title {
	padding: 20upx 40upx;
	font-size: 24upx;
	color: #909090;
}
.info-box {
	padding-left: 40upx;
	background-color: #FFFFFF;
	box-sizing: border-box;
}
.info-item {
	border-bottom: 1px solid #eaeaea;
	padding: 30upx 40upx 30upx 0upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 28upx;
}
.info-item-right::after {
	content: '\e60d';;
	margin-left: 10upx;
	color: #A2A2A2;
	font-size: 14px;
	font-family: iconfont;
}
.info-input {
	flex-grow: 1;
	margin-left: 60upx;
	text-align: right;
}
.textarea-title {
	font-size: 28upx;
	margin: 30upx 0upx;
}
.textarea-style {
	width: 92%;
	height: 150upx;
}
.add-item {
	background-color: #FFFFFF;
	padding: 20upx 0upx;
	width: 100%;
	box-sizing: border-box;
	margin: 30upx 0upx;
}
.add_times_txt {
	font-size: 28upx;
	color: #0049FF;
}
/* 添加样式 */
.report_list {
	background-color: #FFFFFF;
	box-sizing: border-box;
}
.add-item-box {
	width: 92%;
	margin: 0upx auto;
	border-bottom: 1px solid #E8E8E8;
	box-sizing: border-box;
	font-size: 28upx;
	padding: 20upx 0upx;
}
.add-item-title {
	box-sizing: border-box;
	font-size: 28upx;
	margin: 20upx 0upx;
}
.status_txt {
	color: #909090;
}
.delete_status_txt {
	color: #DD524D;
}
.two_btn {
	width: 100%;
	/* height: 130rpx; */
	/* padding-top: 40rpx; */
	text-align: center;
	padding: 20upx 0upx;
	background-color: #fff;
}
.draft_btn {
	margin-left: 34rpx;
	margin-top: 20rpx;
	width: 92%;
	height: 96rpx;
	background: #26AE6C;
	border-radius: 10rpx;

}
.draft_btn text {
	font-size: 32rpx;
	font-weight: bold;
	color: #fff;
}

.submit_btn {
	width: 90%;
	height: 76rpx;
	background: #345AD4;
	border-radius: 10rpx;
	margin: 0 auto;
}

.submit_btn text {
	font-size: 32rpx;
	font-weight: bold;
	color: #fff;
}
.money-input {
	text-align: right;
	font-size: 28upx;
}
</style>
